<template>
  <div :style="{'padding': isCombinedWorkOrder ?  (showAll ? '0' :'5px 0') : '0'}">
    <span>{{label}}</span>
    <span style="padding-left: 4px">
      <q-btn flat
             color="primary"
             @click.stop="show = true"
             class="table-flat-btn"
             style=""
             v-if="showAll"
      >
        全部>
      </q-btn>
    </span>
    <basic-dialog :visible="show"
                  minWidth="400px"
                  :title="title"
                  :isFullScreen="false"
                  isShowClose
                  @close="show = false">
      <div style="padding: 10px 20px">
        <div v-for="(item, i) in dataList" :key="i" class="product-item font-14" style="word-break: break-all;">{{i + 1}}、{{item.label}}</div>
      </div>
    </basic-dialog>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'td-spec',
  props: {
    title: {
      default: '产品规格'
    },
    rowData: Object,
    length: {
      default: 100
    },
    isCombinedWorkOrder: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      label: '',
      dataList: [],
      showAll: false,
      show: false
    }
  },
  methods: {
    getData (data) {
      // console.log(data, 'data')
      const productStandardStr = this.$utils.label(data.productStandard)
      // const productStandardStr = `产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：产品规格：`
      const label = _.truncate(productStandardStr, {
        'length': this.length,
        'separator': '...'
      })
      this.showAll = productStandardStr.length > this.length
      this.label = label
      this.showAll && (this.dataList = data.productSpecs)
      !this.showAll && (this.dataList = [])
    }
  },
  watch: {
    rowData: {
      handler (val) {
        this.getData(val)
      },
      deep: true,
      immediate: true
    },
    length: {
      handler () {
        this.getData(this.rowData)
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped lang="stylus">
.product-item{
  padding 10px 0
  color #333
}
>>>.q-focus-helper{
  height 24px !important
  top 6px !important
}
</style>
